//帖子详情页面
<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>文章详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <div>
      <!-- 标题 -->
      <p>
        <span>
          <h1>{{articalInfos.title}}</h1>
        </span>
        <span>
          作者:
          <span>{{articalInfos.userId}}</span>
        </span>
        <span>发表:{{dateUtil.stringParseDate(articalInfos.crDate,dateUtil.NOSS)}}</span>
      </p>
      <!-- 作者与时间 -->

      <!-- 频道与标签 -->
      <p>

        <router-link v-for="channels in articalInfos.channelList" :key="channels.id"
                     :to="{name:'channelDetail',query:{channelId:channels.channelId,channelName:channels.channelName }}">
          <el-button type class="el-icon-reading"> {{channels.channelName}}</el-button>
        </router-link>


        <!--        <el-button>各种标签</el-button>-->
      </p>
    </div>
    <!-- 内容区 -->

    <el-row>
      <el-col :span="20">
        <div
          v-html="articalInfos.descre==null||articalInfos.descre.length==0?'':articalInfos.descre +'<br>'+ stringUtil.joinURL(fileServer ,articalInfos.imgs)">
        </div>
      </el-col>
      <!-- 广告区 -->
      <!--      <el-col :span="4">-->
      <!--        <div><img style="width:300px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558807789221&di=7d0ff3b336504330d62b859ec4ea019a&imgtype=0&src=http%3A%2F%2Fi2.sinaimg.cn%2Fgm%2Fj%2Fi%2F2015-04-16%2FU4341P115T41D244209F757DT20150416165000.jpg" alt=""></div>-->
      <!--        <div><img style="width:300px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558807789447&di=da66228262e8154f30f5f628e3ade643&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F02%2F20151102165058_GAzJn.jpeg" alt=""></div>-->
      <!--      </el-col>-->
    </el-row>
    <!--    资源区-->
    <div v-if="vipFlag">

      <div v-html="stringUtil.replace(articalInfos.resourceLink,'\n','<br/>')"></div>
      <div v-for="item in getFiles(articalInfos.resourceFile)">
        <a :href="fileServer+item" target="_blank">{{getFileName(item)}}</a>
      </div>
      <div v-html="articalInfos.otherResourceFile"></div>
    </div>
    <!--    当没有vip时就现出这个框-->
<!--    <div v-else-if="buyFlag">-->
    <div v-else>
      <span>资源需要会员才能查看</span>
      <el-button @click="buy" class="el-icon-medal-1" type="success">点我开通</el-button>
    </div>
    <!-- 工具栏 -->
    <div>
      <p>
        <!--        <el-button class="el-icon-view">100资源</el-button>-->
        <!-- 点赞 -->
        <!--        <el-button class="el-icon-top">赞</el-button>-->
        <!--        <el-button class="el-icon-bottom">喷</el-button>-->
        <!--        <el-button class="el-icon-chat-dot-round">评论</el-button>-->
        <el-button :class="collectionClass" @click="collection('add')">收藏</el-button>
<!--        <el-button :class="rssClass" @click="rss(articalInfos.channelId,articalInfos.userId,'add')">订阅</el-button>-->
        <!--        <el-button class="el-icon-warning">举报</el-button>-->
        <!--        <el-button class="el-icon-share">分享</el-button>-->
      </p>
    </div>
    <!-- 推荐 -->
    <!--    <div>-->
    <!--      <el-row>-->
    <!--        <el-col :span="4" v-for="(o, index) in 4" :key="o" :offset="index > 0 ? 2 : 0">-->
    <!--          <el-card :body-style="{ padding: '0px' }" class="card">-->
    <!--            <router-link to="/ArticalDetails">-->
    <!--              <img-->
    <!--                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
    <!--                class="image"-->
    <!--              >-->
    <!--            </router-link>-->

    <!--            <div style="padding: 14px;">-->
    <!--              <span>好吃的汉堡</span>-->
    <!--              <div class="bottom clearfix">-->
    <!--                天涯频道-->
    <!--                <span>100k</span>-->
    <!--                <i class="el-icon-view"></i>-->
    <!--                <span>10P</span>-->
    <!--                &lt;!&ndash; <time class="time">{{ currentDate }}</time> &ndash;&gt;-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </el-card>-->
    <!--        </el-col>-->
    <!--      </el-row>-->

    <!--      <el-row>-->
    <!--        <el-col >-->
    <!--          <el-button type="success" style="width:100%">更多</el-button>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </div>-->
    <div>
      <el-pagination background layout="prev, pager, next" :page-count="totalPage"
                     :page-size="pageSize"
                     :current-page="currentPage"
                     @current-change="pageChange"

      ></el-pagination>
      <!-- 评论区 -->
      <!--      每页的固定评论-->
      <el-row>
        <!--          头像-->
        <el-col :span="2">
          <el-avatar shape="circle" :size="60" :src="getFace(userInfo && userInfo.face)"></el-avatar>

        </el-col>
        <el-col :span="22">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入评论内容。。。"
            v-model="commentTextarea"
          >
          </el-input>
          <div>
            <el-row>
              <el-col :span="2">
                <button @click="subReply">提交</button>
              </el-col>
            </el-row>
          </div>
        </el-col>

      </el-row>

      <div v-for="one in pageComment" :key="one.id">
        <comment :textareas="one.contents" :face="one.face" :sendName="one.sendUser" :replyName="one.replyUser"
                 :crDate="one.crDate" :articalId="Number(articalId)" :replyId="Number(one.id)" @func="commentPage"/>
        <div v-for="two in one.resList" :key="two.id">
          <el-row>
            <el-col :span="23" :offset="1">
              <comment :textareas="two.contents" :face="two.face" :sendName="two.sendUser" :replyName="two.replyUser"
                       :crDate="two.crDate " :articalId="Number(articalId)" :replyId="Number(one.id)"
                       @func="commentPage"/>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-pagination background layout="prev, pager, next" :page-count="totalPage"
                     :page-size="pageSize"
                     :current-page="currentPage"
                     @current-change="pageChange"

      ></el-pagination>
    </div>


  </div>
</template>
<script>
  import {Artical} from "../req/Artical";
  import {ContentType} from "../constant/ContentType";
  import {StringUtil} from "../../utils/StringUtil";
  import {ResultStatus} from "../constant/ResultStatus";
  import {DateUtil} from "../../utils/DateUtil";
  import {Handle} from "../constant/Handle";
  import Comment from '@/views/common/Comment';
  import {BasePageReq} from "../admin/req/BasePageReq";
  import $ from 'jquery'
  import config from '@/config/'
  import configs from "../common/PageCard";

  let artical = new Artical();
  export default {
    metaInfo () {
      return {
        title: this.articalInfos.title,
        meta: [
          {                 // set meta
          name: 'description',
          content: this.articalInfos.title
          },
          {                 // set meta
            name: 'keywords',
            content: StringUtil.replace(this.articalInfos.descre,'</br>',' ')
          },
          {                 // set meta
            name: 'generator',
            content: 'java vue'
          },
          {                 // set meta
            name: 'application-name',
            content: '快乐星球'
          },
          {                 // set meta
            name: 'msapplication-tooltip',
            content: '快乐星球'
          },
        ],
        link: [{                 // set link
          rel: 'asstes',
          href: location.href
        }]
      }
    },
    data() {
      return {
        articalInfos: {},//文章信息
        commentSwich: false //评论开关框默认关闭
        , textarea: '' //文章内容
        , page: 1
        , size: 40
        , pageComment: {} //评论颁
        , dateUtil: DateUtil
        , stringUtil: StringUtil
        , baseURL: this.$axios.defaults.baseURL
        , collectionClass: "el-icon-star-off" //收藏图标
        , userInfo: {}
        , rssClass: "el-icon-circle-plus-outline" //订阅图标
        , pageSize: 40,
        totalPage: 1,//总页数
        currentPage: 1, //当前页数
        articalId: this.$route.query.id,
        commentTextarea: "",//评论区
        baseIMG: this.$axios.defaults.baseIMG,
        vipFlag: false,//vip资源
        buyFlag: false,//开通会员
        fileServer: this.$axios.defaults.fileServer,
        replateFileServer: this.$axios.defaults.replateFileServer,

      }

    },
    mounted() {
      //截取出url中id的值
      // let id = window.location.hash.substr(window.location.hash.indexOf("?") + 4); // 获取url上的id
      //声明全局变量
      window.id = this.$route.query.id; //获取Url中id的值
      //  this.queryComment(id);
      //查询文章
      this.queryArtial(id);
      //获取登陆信息
      // this.userInfo = this.$store.getters.getUserInfo;
      //查询评论


    },
    methods: {
      //查询帖子
      queryArtial: async function (id) {
        console.log(this.$router)
        console.log(this.$route)
        artical.id = id;
        artical.handle = Artical.QUERY;
        await this.$axios
          .post('/artical/save',
            artical, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {

            let datas = response.data;
            if (datas.code != ResultStatus.SUCCESS) {
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let item = datas.data;
            //替换失效的文件服务
            let descre =  StringUtil.replace(item.descre,config.invalidFileserver,config.replateFileserver)
            let otherPre = StringUtil.replace(item.otherPre,config.invalidFileserver,config.replateFileserver)
            let otherResourceFile = StringUtil.replace(item.otherResourceFile,config.invalidFileserver,config.replateFileserver)
            item.descre = descre;
            item.otherPre = otherPre;
            item.otherResourceFile = otherResourceFile
            this.articalInfos = item;


          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },


      /**
       * 收藏
       * @param handler
       */
      collection(handler) {

        if (this.collectionClass == 'el-icon-star-on') {
          handler = Handle.DEL;
        }

        this.$axios
          .post('/collection/save',
            {articalId: this.$route.query.id, handle: handler}, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {
            let datas = response.data;
            if (datas.code == ResultStatus.SUCCESS) {
              if (handler == Handle.QUERY) {
                if (!StringUtil.checkNull(datas.data.id)) {
                  this.collectionClass = 'el-icon-star-on';
                  return;
                }
              }

              if (handler == Handle.ADD) {
                this.collectionClass = 'el-icon-star-on';
                return;
              }
              if (handler == Handle.DEL) {
                this.collectionClass = 'el-icon-star-off';
                return;
              }

            } else {
              if (handler != Handle.QUERY) {
              this.$notify(StringUtil.warning(datas.msg));
            }
              return;
            }
          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })


      },

      /**
       * 订阅
       * @param handler
       */
      rss: function (channelId, userId, handler) {
        if (this.rssClass == 'el-icon-success') {
          handler = Handle.DEL;
        }
        let rssReq = {
          handle: handler,
          channelId: channelId,
          userId: userId,
        }
        this.$axios
          .post('/rss/save',
            rssReq, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {
            let datas = response.data;
            if (datas.code == ResultStatus.SUCCESS) {
              if (handler == Handle.QUERY) {
                if (!StringUtil.checkNull(datas.data.channelId)) {
                  this.rssClass = 'el-icon-success';
                  return;
                }
              }

              if (handler == Handle.ADD) {
                this.rssClass = 'el-icon-success';
                return;
              }
              if (handler == Handle.DEL) {
                this.rssClass = 'el-icon-circle-plus-outline';
                return;
              }

            } else {
              if (handler != Handle.QUERY) {
                this.$notify(StringUtil.warning(datas.msg));
              }
              return;
            }
          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })


      },
      pageChange(page) {
        this.currentPage = page;
        this.commentPage('');
      },
      //评论分布
      commentPage(data) {


        let commentPage = new BasePageReq();
        commentPage.size = this.pageSize;
        commentPage.page = this.currentPage;
        commentPage.articalId = this.articalId;
        this.$axios
          .post('/artical/comment/queryPage',
            commentPage, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response) => {
            let datas = response.data;
            if (datas.code != ResultStatus.SUCCESS) {
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let datas2 = datas.data;
            this.pageSize = datas2.size;
            this.pageComment = datas2.list;
            this.totalPage = datas2.totalPage
            //分页数据


          })
          .catch((error) => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      /**
       * 评论头像
       * @param data
       * @returns {string|*}
       */
      getFace(data) {
        if (StringUtil.checkNull(data)) {
          return this.baseIMG;
        }
        return this.fileServer + StringUtil.replace(data, '\\', '/');
      },
      /**
       * 提交
       */
      subReply() {

        if (StringUtil.checkNull(this.commentTextarea)) {
          this.$notify(StringUtil.warning("请输入评论内容"));
          return;
        }
        this.userInfo = this.$store.getters.getUserInfo;
        let commentReq = {
          handle: Handle.ADD,
          contents: this.commentTextarea,
          sendId: this.userInfo.id,
          articalId: this.articalId,
        }
        this.$axios.post('/artical/comment/save', commentReq, ContentType.APPLICATION_JSON)
          .then(response => {
            let datas = response.data;
            if (datas.code == ResultStatus.SUCCESS) {
              this.$notify(StringUtil.success(datas.msg));
              this.commentPage('');
            } else {
              this.$notify(StringUtil.warning(datas.msg));
            }
          })
          .catch(error => {
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })
      },
      /**
       * 获取文件名
       * @param file
       */
      getFileName: function (file) {
        if (StringUtil.checkNull(file)) {
          return "";
        }
        let split = file.split('\\');
        return split[split.length - 1];
      },
      /**
       * 获取集合
       * @param data
       */
      getFiles(file) {
        if (StringUtil.checkNull(file)) {
          return null;
        }
        return file.split('&&');
      },
      /**
       * 查询会员,自己发的帖子不需要会员就能看，别人的帖子必须要会员
       */
      queryVip() {
        try {
          this.userInfo = this.$store.getters.getUserInfo;
          if (this.userInfo.id == this.articalInfos.userId) {
            this.vipFlag = true;
            return;
          }
          if (this.userInfo.vip == Handle.YES || this.userInfo.power == 'admin') {
            this.vipFlag = true;
          } else {
            this.vipFlag = false;
            this.buyFlag = true;
          }
        } catch (e) {
          console.log(e)
          this.vipFlag = false;
          this.buyFlag = true;
        }
      },
      buy() {
        if (StringUtil.checkNull(this.userInfo)) {
          this.$notify(StringUtil.warning("未登陆，请先登陆"));
          return;
        }
        this.$router.push({path: '/admin/vip/manage'})
      }

    },
    mounted: async function () {
      await this.queryArtial(this.$route.query.id);//文章详情
      try {
        this.collection(Handle.QUERY);//查询收藏
        this.rss(this.articalInfos.channelId, this.articalInfos.userId, Handle.QUERY);//查询关注
      }catch (e) {
        console.log(e)
      }
      this.commentPage('');//查询评论
      this.queryVip();
      //jquery替换失效的图片
      /*$(document).ready(function(){
        //图片
        $('img').each(function(i,val){
          let img_src = $(this).attr('src');
          let new_img_src =  img_src.replace('104.199.199.214:9000/file-server/files/bbs/',config.replateFileserver);
          $(this).attr('src',new_img_src);
        })
        //a标签
        $('a').each(function(i,val){
          let img_src = $(this).attr('href');
          let new_img_src =  img_src.replace('104.199.199.214:9000/file-server/files/bbs/',config.replateFileserver);
          $(this).attr('href',new_img_src);
        })
      });*/

    },
    components: {
      comment: Comment,
    }


  };
</script>
<style>
  a {
    text-decoration: underline;
  }
</style>
